import React, { useRef } from 'react';
import { Modal } from 'antd';
// import { observer } from "mobx-react" //引入mobx,为了下一行
// import $state from "state" //引入state主要方便管理多个弹出框时,改变不同弹窗的打开标识

const BigPicture = (props) => {
  const { visible } = props;
  const zoomImg = useRef(null);

  const handleImgZoom = (e) => {
    const { clientWidth, clientHeight, style, height, width } = zoomImg.current;
    const value = height / width;
    const num = 100;
    const bool = height > width ? clientWidth < 2000 : clientHeight < 1500;
    if (e.nativeEvent.deltaY <= 0 && bool) {
      style.maxWidth = 'none';
      style.maxHeight = 'none';
      style.width = width + num + 'px';
      style.height = height + num * value + 'px';
      style.left = style.left - (1 % +'px');
      style.top = style.top - (1 % +'px');
    } else if (e.nativeEvent.deltaY > 0) {
      if (width > 200 && height > 100) {
        style.width = width - num + 'px';
        style.height = height - num * value + 'px';
        style.left = style.left + (1 % +'px');
        style.top = style.top + (1 % +'px');
      }
    }
  };

  const prenentDefault = (e) => {
    e.prenentDefault();
  };

  const handleDrag = (e) => {
    const { style, offsetLeft, offsetTop } = zoomImg.current;
    //在jsx格式中需要用e.persist(),此方法会从池中移除合成时间,否则clientX会是null
    const x = e.clientX - offsetLeft;
    const y = e.clientY - offsetTop;
    zoomImg.current.onmousemove = function (e) {
      style.left = e.clientX - x + 'px';
      style.top = e.clientY - y + 'px';
    };
    zoomImg.current.onmouseup = function () {
      zoomImg.current.onmousemove = null;
    };
  };

  const closePicModal = (e) => {
    e.stopPropagation();
    // visible = false;
  };

  return (
    <Modal visible={visible} onCancel={closePicModal}>
      <div className="close-botton" onClick={closePicModal}>
        <i />
      </div>
      <img
        className="zoomImg"
        alt=""
        src={props.url}
        onWheel={handleImgZoom} //滚轮缩放
        onDragStart={prenentDefault}
        onMouseDown={(e) => {
          e.persist();
          handleDrag(e);
        }}
        ref={zoomImg}
      />
    </Modal>
  );
};

export default BigPicture;
